<template>
    <div class="froms" v-loading="listLoading">
          <el-dialog  :title="title"  :visible.sync="Visible" width="30%" :before-close="handleClose">

            <el-form :model="menuData"  style="width:80%" ref="menuData" :rules="rules">
                <el-form-item  label="菜单ID" :label-width="labelwidth" prop="menuid">
                    <el-input  v-model="menuData.menuid">
                    </el-input>
                </el-form-item> 

                <el-form-item label="菜单名称" :label-width="labelwidth" prop="menuname">
                    <el-input v-model="menuData.menuname">
                    </el-input>
                </el-form-item>

                <el-form-item label="菜单图标" :label-width="labelwidth" prop="menuicon">
                    <el-input v-model="menuData.menuicon">
                    </el-input>
                </el-form-item>

                 <el-form-item label="菜单排序" :label-width="labelwidth" prop="menusort">                  
                      <el-input-number v-model="menuData.menusort"  :min="1" :max="10" label="描述文字"></el-input-number>
                </el-form-item>
 
                <el-form-item label="菜单资源" :label-width="labelwidth" prop="menuresource">
                    <el-input  v-model="menuData.menuresource">
                        <el-button slot="append" @click="Clickmenu()"> 选择              
                        </el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="菜单是否显示" :label-width="labelwidth" prop="menustate">
                    <el-switch v-model="menuData.menustate"   active-color="#13ce66" inactive-color="#F0F0F0">
                    </el-switch>                   
                </el-form-item>

            </el-form> 
             <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('menuData')">取 消</el-button>
                <el-button type="primary" @click="Addmenu('menuData')">确 定</el-button>
            </div>
        </el-dialog>

        <div>
            <el-dialog
                title="选择菜单"
                :visible.sync="VisibleTree"
                width="20%"
                :before-close="handleClose">                                  
                    <el-tree
                        class="filter-tree"
                            show-checkbox
                        :data="TreeData"
                        :props="defaultProps"
                        default-expand-all                           
                        @check="handleNodeClick"                 
                        ref="tree2">
                    </el-tree>                                           
                <span slot="footer" class="dialog-footer">
                    <el-button @click="VisibleTree = false">取 消</el-button>
                    <el-button type="primary" @click="VisibleTree = false">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>

export default{
     
    data(){
        return {
            VisibleTree:false,
            TreeData:[],
            defaultProps: {
            children: 'children',
            label: 'menuname'
            },
            title:'菜单添加',
            Visible:false,
            labelwidth:'160px',
            menuData:{menusort:1},
            listLoading:false,
            rules:{
                menuid:[
                    {required:true,message:'请输入菜单ID',trigger:'change'}
                ],
                menuname:[
                    {required:true,message:'请输入菜单名称',trigger:'change'}
                ],
                menucode:[
                    {required:true,message:'请输入菜单编码',trigger:'change'}
                ]
            }
        }
    },
    mounted(){
       
    },
    methods:{
      //获取部门树 数据
      getTree(){
        var _this = this;
        _this.$api.Menutree().then((res)=>{      
            if(res.result =='ok'){
                _this.TreeData =res.data;
            }    
        }).catch((err)=>{ 
            _this.$message({ message:'数据获取失败', type:'error'});
        });
      },
      handleNodeClick(){

      },
      Clickmenu(){
            this.VisibleTree = true;
             
        },
         //菜单添加
         Addmenu(menuData){
            var _this = this;
            _this.$refs[menuData].validate((valid)=>{             
            if(valid){               
                // 开启动画
                _this.listLoading = true;
                _this.$api.MenuAdd(_this.menuData).then((res)=>{
                //关闭动画
                _this.listLoading = false;                      
                // 数据返回成功
                if(res.result=='ok'){                     
                    _this.$message({message:res.msg,type:'success'})
                    _this.Visible =false;                          
                    // 调用父组件的获取数据方法
                    _this.$parent.getResult();
                    _this.resetForm();
                }
                }).catch((err)=>{
                    _this.$message({  message:err.msg,   type:'error'});
                })   
            }else{            
                console.log("失败");
            }
            });    
         },
         Editmenu(){
             var data = {'menuid':this.id};
             this.$api.menumenugetID(data)
             .then((res)=>{
                this.menuData =  res.data;
             })
             .catch((err)=>{
                this.$message({
                     message:'错误'
                 })
             });
         },
         // 取消
        resetForm(){    
           
          this.$refs.menuData.resetFields();
          this.Visible =false;
        },
        handleClose(done){
            done();
            this.resetForm();
        }
    }
}
</script>

<style>

 
</style>